<script setup lang="ts">
defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '提示',
  },
  message: {
    type: String,
    default: '',
  },
  image: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue', 'close'])

function closeModal() {
  emit('update:modelValue', false)
  emit('close')
}
</script>

<template>
  <UModal
    :model-value="modelValue"
    :ui="{
      width: 'w-9/10',
      container: 'flex items-center justify-center min-h-screen px-4',
      overlay: { background: 'bg-black/80' },
      base: 'relative',
    }"
    @update:model-value="value => emit('update:modelValue', value)"
  >
    <UCard class="relative">
      <!-- 关闭按钮 -->
      <button
        class="text-#93806b transition-colors right-3 top-3 absolute z-10 hover:text-#785a40"
        @click="closeModal"
      >
        <UIcon name="i-heroicons-x-mark" class="text-xl" />
      </button>

      <template #header>
        <div class="text-#93806b text-center">
          <h2 class="text-2xl font-bold">
            {{ title }}
          </h2>
        </div>
      </template>
      <div class="text-#93806b text-center">
        <span>{{ message }}</span>
        <slot />
      </div>
      <div v-if="image" class="text-#93806b text-center">
        <img class="mx-auto w-[80%] left-0 right-0" :src="`data:image/png;base64,${image}`">
        <slot />
      </div>
    </UCard>
  </UModal>
</template>
